<template>
	<div class="redianci">
		<div class="redianci1">
			<div class="redainci1_1">
				<p>
					<i class="el-icon-lock"></i>
				</p>
				<p>
					{{wenben}}
				</p>
				<p>
					<span @click="open">立即升级</span>
				</p>
			</div>
		</div>
		<div class="redianci2">
		  <img src="../../assets/img/caikao.png" />
		</div>
	</div>
</template>

<script>
	export default{
		props:['wenben'],
		data(){
			return{
				
			}
		},
		methods:{
			//立即升级弹框
			open() {
				this.$confirm('此功能仅限高级版本使用，请升级后再试', '升级提示', {
				  confirmButtonText: '立即升级',
				  cancelButtonText: '我在想想',
				  type: 'warning',
				}).then(() => {
				 //  this.$message({
					// type: 'success',
					// message: '立即升级!'
				 //  });
				 this.$router.push('/home/'+this.$store.state.luyoushu+'/xufeizhongxin')
				}).catch(() => {
				  this.$message({
					type: 'info',
					message: '好好在想想哟！'
				  });          
				});
			 }
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.redianci{
		background-color: #fff;
		border-radius:0.1rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 3rem 0;
		
		.redianci1{
			flex: 1;
			
			.redainci1_1{
				width: 40%;
				margin: auto;
				p:nth-of-type(1){
					color: #999;
					font-size: 3rem;
				}
				p:nth-of-type(2){
					color: #333333;
					font-size: 0.5rem;
					line-height: 1rem;
					margin: 0.5rem 0;
				}
				p:nth-of-type(3){
					span{
						cursor: pointer;
						background-color: #0091FF;
						color: #fff;
						font-size: 0.4rem;
						padding: 0.2rem 0.3rem;
						border-radius:0.05rem ;
					}
				}
			}
		}
		.redianci2{
			margin-right:4rem ;
			flex: 1;
			
			img{
				width: 18rem;
			}
		}
	}
</style>
